<!doctype html>
<html lang="zh-cmn-Hans">
<head>
<title>条形码/二维码生成</title>
<link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
<script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"></script>
<link rel="stylesheet" href="https://www.xingzhenghang.tk/ui/css/mdui.min.css"/>
<script async src="https://www.xingzhenghang.tk/js/mdui.min.js"></script>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="width=device-width"/>
<meta name="theme-color" content="#3F51B5">
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?10b3469c417e40383a17d8d05828d4de";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
function addLink() {
    var body_element = document.body;
    var selection;
    selection = window.getSelection();
    if (window.clipboardData) { // Internet Explorer
        var pagelink ="\r\n\r\n 原文出自[ 小 X ] 转载请保留原文链接: "+document.location.href+"";
        var copytext = selection + pagelink;
        window.clipboardData.setData ("Text", copytext);
        return false;
    } else {
        var pagelink = " 原文出自[ 小 X ] 转载请保留原文链接: "+document.location.href+"";
        var copytext = selection + pagelink;
        var newdiv = document.createElement('div');
        newdiv.style.position='absolute';
        newdiv.style.left='-99999px';
        body_element.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);
        window.setTimeout(function() {
        body_element.removeChild(newdiv);
        },0);
    }
}
document.oncopy = addLink;
</script>
</head>

<body>
<div class="mdui-typo container">


<div class="mdui-appbar">
<div class="mdui-toolbar mdui-color-indigo">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
  <span class="mdui-typo-title">条形码/二维码生成</span>
  <div class="mdui-toolbar-spacer"></div>
</div>

<div class="mdui-tab mdui-color-indigo mdui-tab-full-width" mdui-tab>
  <a href="#barcode" class="mdui-ripple mdui-tab-active mdui-ripple-white">
    <svg t="1578405856257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1105" width="24" height="24"><path d="M160 544c-17.664 0-32 14.304-32 32l0 320c0 17.696 14.336 32 32 32s32-14.304 32-32L192 576C192 558.304 177.664 544 160 544z" p-id="1106" fill="#ffffff"></path><path d="M608 544c-17.696 0-32 14.304-32 32l0 320c0 17.696 14.304 32 32 32s32-14.304 32-32L640 576C640 558.304 625.696 544 608 544z" p-id="1107" fill="#ffffff"></path><path d="M864 544c-17.696 0-32 14.304-32 32l0 320c0 17.696 14.304 32 32 32s32-14.304 32-32L896 576C896 558.304 881.696 544 864 544z" p-id="1108" fill="#ffffff"></path><path d="M288 544c-17.664 0-32 14.304-32 32l0 224c0 17.696 14.336 32 32 32s32-14.304 32-32l0-224C320 558.304 305.664 544 288 544z" p-id="1109" fill="#ffffff"></path><path d="M416 544c-17.664 0-32 14.304-32 32l0 224c0 17.696 14.336 32 32 32s32-14.304 32-32l0-224C448 558.304 433.664 544 416 544z" p-id="1110" fill="#ffffff"></path><path d="M736 544c-17.696 0-32 14.304-32 32l0 224c0 17.696 14.304 32 32 32s32-14.304 32-32l0-224C768 558.304 753.696 544 736 544z" p-id="1111" fill="#ffffff"></path><path d="M160 352c17.664 0 32-14.336 32-32L192 128c0-17.664-14.336-32-32-32S128 110.336 128 128l0 192C128 337.664 142.336 352 160 352z" p-id="1112" fill="#ffffff"></path><path d="M288 352c17.664 0 32-14.336 32-32L320 128c0-17.664-14.336-32-32-32S256 110.336 256 128l0 192C256 337.664 270.336 352 288 352z" p-id="1113" fill="#ffffff"></path><path d="M416 352c17.664 0 32-14.336 32-32L448 128c0-17.664-14.336-32-32-32s-32 14.336-32 32l0 192C384 337.664 398.336 352 416 352z" p-id="1114" fill="#ffffff"></path><path d="M608 352c17.696 0 32-14.336 32-32L640 128c0-17.664-14.304-32-32-32s-32 14.336-32 32l0 192C576 337.664 590.304 352 608 352z" p-id="1115" fill="#ffffff"></path><path d="M736 352c17.696 0 32-14.336 32-32L768 128c0-17.664-14.304-32-32-32s-32 14.336-32 32l0 192C704 337.664 718.304 352 736 352z" p-id="1116" fill="#ffffff"></path><path d="M864 352c17.696 0 32-14.336 32-32L896 128c0-17.664-14.304-32-32-32s-32 14.336-32 32l0 192C832 337.664 846.304 352 864 352z" p-id="1117" fill="#ffffff"></path><path d="M928 416 96 416c-17.664 0-32 14.336-32 32s14.336 32 32 32l832 0c17.696 0 32-14.336 32-32S945.696 416 928 416z" p-id="1118" fill="#ffffff"></path></svg>
    <label>条形码</label>
  </a>
  <a href="#qrcode" class="mdui-ripple mdui-ripple-white">
    <svg t="1578406045128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2070" width="24" height="24"><path d="M64.1 128.2v272c0 35.3 28.7 64 64 64h272c35.3 0 64-28.7 64-64v-272c0-35.3-28.7-64-64-64h-272c-35.4 0-64 28.7-64 64z m304 272h-208c-17.7 0-32-14.3-32-32v-208c0-17.7 14.3-32 32-32h208c17.7 0 32 14.3 32 32v208c0 17.7-14.4 32-32 32zM560.1 128v272c0 35.3 28.7 64 64 64h272c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64h-272c-35.3 0-64 28.6-64 64z m304 272h-208c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h208c17.7 0 32 14.3 32 32v208c0 17.6-14.3 32-32 32zM64.1 623.6v272c0 35.3 28.7 64 64 64h272c35.3 0 64-28.7 64-64v-272c0-35.3-28.7-64-64-64h-272c-35.4 0-64 28.6-64 64z m304 272h-208c-17.7 0-32-14.3-32-32v-208c0-17.7 14.3-32 32-32h208c17.7 0 32 14.3 32 32v208c0 17.6-14.4 32-32 32zM592.1 941c-17.6 0-32-14.4-32-32V613c0-17.6 14.4-32 32-32s32 14.4 32 32v296c0 17.6-14.4 32-32 32zM763.1 886c-17.6 0-32-14.4-32-32V668c0-17.6 14.4-32 32-32s32 14.4 32 32v186c0 17.6-14.4 32-32 32zM928 961c-17.6 0-32-14.4-32-32V593c0-17.6 14.4-32 32-32s32 14.4 32 32v336c0 17.6-14.4 32-32 32z" fill="#ffffff" p-id="2071"></path></svg>
    <label>二维码</label>
  </a>
</div>
</div>

<br>
<div class="mdui-container doc-container">
          <div id="collapseOne" class="in collapse bs-docs-example">
                <div id="barcode" class="panel">
                    <div class="panel-body">
                        <form id="form1" class="form-horizontal" action="/barcode/" method="post">
                        <div class="form-group">
                            <h1>条形码内容：</h1>
                          <div class="mdui-textfield mdui-textfield-floating-label">
                            <label class="mdui-textfield-label">请输入条形码内容，例如：www.xingzhenghang.tk</label>
                            <textarea class="mdui-textfield-input form-control" id="url_txt" name="url_txt" type="text" autocomplete="off"></textarea>
                          </div>
                        </div>
                        <div class="form-group">
                            <div class="mdui-row-xs-2">
                              <div class="mdui-col">
                                <button type="button" class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple mdui-color-indigo btn btn-success" id="btnresult">生成条形码</button>
                              </div>
                              <div class="mdui-col">
                                <button type="button" class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple mdui-color-indigo btn btn-danger" onclick="empty()">清空内容框</button>
                              </div>
                            </div>
                        </div>
                        <br>
                        <br>
                        <hr/>
                        <br>
                        <div class="form-group">
                            <h1>生成的条形码：<small>（长按/右击保存）</small></label>
                            <div class="col-sm-10">
                                <img id="imgcode" style="max-width: 100%;" />
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
                <div id="qrcode" class="panel">
                    <div class="panel-body">
<body class="container" ng-app="adaptiveApp">

  <div ng-controller="AdaptiveCtrl">

  <div class="body">

    <p>
      <qr text="qrcodeString" type-number="typeNumber" correction-level="correctionLevel" size="size" input-mode="inputMode" image="image"></qr>
    </p>

    <p>
      <label for="text">内容：</label>
    </p>
    <p>
<div class="mdui-textfield">
      <textarea class="mdui-textfield-input" type="text" id="text" ng-model="qrcodeString" placeholder="在这里输入文本"></textarea>
</div>
    </p>

    <p>
      <label for="typeNumber">模式:</label>
      <span>{{typeNumber}}（尽可能使用0）</span>
    </p>
    <p>
<label class="mdui-slider mdui-slider-discrete">
  <input id="typeNumber" ng-model="typeNumber" type="range" step="1" min="0" max="40"/>
</label>
    </p>

    <p>
      <label for="size">纠错等级：</label>
      <span>{{correctionLevel}}</span>
    </p>
    <p>
      <label class="mdui-radio"><input type="radio" id="correctionLevel" ng-model="correctionLevel" value="" checked/><i class="mdui-radio-icon"></i>自动 (M)</label>
      <label class="mdui-radio"><input type="radio" id="correctionLevel" ng-model="correctionLevel" value="L"/><i class="mdui-radio-icon"></i>L (低)</label>
      <label class="mdui-radio"><input type="radio" id="correctionLevel" ng-model="correctionLevel" value="M"/><i class="mdui-radio-icon"></i>M (中)</label>
      <label class="mdui-radio"><input type="radio" id="correctionLevel" ng-model="correctionLevel" value="Q"/><i class="mdui-radio-icon"></i>Q (较高)</label>
      <label class="mdui-radio"><input type="radio" id="correctionLevel" ng-model="correctionLevel" value="H"/><i class="mdui-radio-icon"></i>H (高)</label>
    </p>


    <p>
      <label for="size">大小:</label>
      <span>{{size}}</span>
    </p>
    <p>
<label class="mdui-slider mdui-slider-discrete">
  <input id="size" ng-model="size" type="range" step="1" min="100" max="500"/>
</label>
    </p>

    <p>
      <label for="size">输出模式：</label>
      <span>{{inputMode}}</span>
    </p>
    <p>
      <label class="mdui-radio"><input type="radio" id="inputMode" ng-model="inputMode" value="" checked/><i class="mdui-radio-icon"></i>自动</label>
      <label class="mdui-radio"><input type="radio" id="inputMode" ng-model="inputMode" value="NUMBER"/><i class="mdui-radio-icon"></i>数字</label>
      <label class="mdui-radio"><input type="radio" id="inputMode" ng-model="inputMode" value="ALPHA_NUM"/><i class="mdui-radio-icon"></i>数字（测试）</label>
      <label class="mdui-radio"><input type="radio" id="inputMode" ng-model="inputMode" value="8bit"/><i class="mdui-radio-icon"></i>8位</label>
    </p>

    <p>
      <label for="image">渲染图像：</label>
      <span>{{image}}</span>
    </p>
    <p>
      <label class="mdui-radio"><input type="radio" id="image" ng-model="image" ng-value="true" checked/><i class="mdui-radio-icon"></i>是</label>
      <label class="mdui-radio"><input type="radio" id="image" ng-model="image" ng-value="false"/><i class="mdui-radio-icon"></i>否</label>
    </p>

  </div>
</div>

<script src="angular.min.js"></script>
<script src="qrcode.js"></script>
<script src="angular-qr.js"></script>

<script>
angular.module('adaptiveApp', ['ja.qr']).

controller('AdaptiveCtrl', function ($scope) {
  $scope.qrcodeString = 'YOUR TEXT TO ENCODE';
  $scope.size = 250;
  $scope.correctionLevel = '';
  $scope.typeNumber = 0;
  $scope.inputMode = '';
  $scope.image = true;
});
</script>
                </div>
            </div>
</div>
<br>
<br>
<br>
    <script src="/barcode/index.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var content = $("#url_txt").val();
            if (content == "") {
                content = "www.xingzhenghang.tk";
                $("#imgcode").JsBarcode(content);
            }
        });
        $("#btnresult").click(function () {
            gen_code();
        })
        function gen_code() {
            var content = $("#url_txt").val();
            if (content == "") {
                JsonsMessageBox($("#url_txt"), "请输入条形码内容");
            }
            else {
                $("#imgcode").JsBarcode(content);
            }
        }
        function empty() {
            $("#url_txt").val("");
            $('#imgcode').attr("src", "");
        }
    </script>
</body>
</html>
